<!-- 倒计时 -->
<template>
  <div class="countDown">距离打卡结束倒计时{{hr}}:{{min}}:{{sec}}</div>
</template>

<script>
export default {
  props: {
    hr: Number,
    min: Number,
    sec: Number,
  },
  data() {
    return {};
  },
  mounted(){
     this.countDown();
  },
  methods:{
       countDown() {
    let sum =(this.hr * 1000 * 60 * 60)+(this.min * 1000 * 60)+(this.sec * 1000);
    //判断当倒计时结束时都为0
    if(sum <= 0){
      return;
    }
    sum = sum - 1000;
    let hr = parseInt((sum / 1000 / 60 / 60)%24) ; //算出小时数
    let min = parseInt((sum / 1000 / 60)%60); //算出分钟数
    let sec = parseInt((sum / 1000)%60); //算出秒数
    
    //对数据赋值
    this.hr = hr > 9 ? hr : "0" + hr;
    this.min = min > 9 ? min : "0" + min;
    this.sec = sec > 9 ? sec : "0" + sec;
    
    //使用定时器 然后使用递归 让每一次函数能调用自己达到倒计时效果
    setTimeout(()=>{
        this.countDown();
    },1000);
  },
  }

};
</script>

<style  scoped>
.countDown{
    text-align: center;
    color: rgb(32, 30, 30);
    margin: 20px 0;
}
</style>
